<template>
	<view class="login-container">
		<!-- 顶部logo和标题 -->
		<view class="login-header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-name">成语接龙</text>
			<!--      <text class="company-name">深圳中博纳</text> -->
		</view>

		<!-- 登录表单 -->
		<view class="login-form">
			<view class="form-item">
				<image class="input-icon" src="/static/icons/user.png" mode="aspectFit"></image>
				<input v-model="form.username" placeholder="请输入用户名" placeholder-class="placeholder" class="input" />
			</view>

			<view class="form-item">
				<image class="input-icon" src="/static/icons/password.png" mode="aspectFit"></image>
				<input v-model="form.password" placeholder="请输入密码" placeholder-class="placeholder" class="input"
					password />
			</view>

			<button class="login-btn" :loading="loading" :disabled="loading" @click="handleLogin">
				{{ loading ? '登录中...' : '登 录' }}
			</button>
		</view>
		<view class="footer">
			<text class="footer-text">还没有账号？</text>
			<text class="register-link" @click="navigateToRegister">立即注册</text>
		</view>

		<!-- 底部版权信息 -->
		<view class="login-footer">
			<text class="copyright">© 2023 深圳中博纳 版权所有</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				loading: false
			}
		},
		methods: {
			async handleLogin() {
				// 表单验证
				if (!this.form.username.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return
				}

				if (!this.form.password.trim()) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}

				this.loading = true

				try {
					// 调用后端登录接口
					const res = await uni.request({
						url: 'http://localhost:8003/api/v1/login',
						method: 'POST',
						data: this.form,
						header: {
							'Content-Type': 'application/json'
						}
					})
					// 根据实际接口返回结构调整
					if (res.statusCode === 200 && res.data.code === 200) {
						// 登录成功处理
						uni.setStorageSync('token', res.data.data.token)
						uni.setStorageSync('nickname', res.data.data.nickname)
						uni.setStorageSync('isLogin', true)

						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})

						// 跳转到首页
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						throw new Error(res.data.message || '登录失败')
					}
				} catch (error) {
					uni.showToast({
						title: error.message || '登录失败，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			navigateToRegister() {
			      uni.navigateTo({
			        url: '/pages/register/register'
			      })
			    }
		}
	}
</script>

<style lang="scss">
	/* 新增页面基础样式 */
	page {
		height: 100%;
		overflow: hidden;
		background: linear-gradient(to bottom, #f5f7fa, #e4e8ed);
	}

	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100vh;
		width: 100vw;
		padding: 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		position: fixed;
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;

		.logo {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
		}

		.app-name {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.company-name {
			font-size: 28rpx;
			color: #666;
		}
	}

	.login-form {
		width: 100%;
		margin-top: 80rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.form-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 50rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 40rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.input-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.input {
				flex: 1;
				font-size: 32rpx;
				color: #333;
				height: 80rpx;
				line-height: 80rpx;
			}

			.placeholder {
				color: #bbb;
				font-size: 32rpx;
			}
		}

		.login-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
			background: linear-gradient(to right, #3a7bd5, #00d2ff);
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 60rpx;
			box-shadow: 0 8rpx 20rpx rgba(58, 123, 213, 0.3);

			&[disabled] {
				opacity: 0.7;
			}
		}
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		padding-bottom: env(safe-area-inset-bottom);

		.footer-text {
			font-size: 28rpx;
			color: #666;
		}

		.register-link {
			font-size: 28rpx;
			color: #3a7bd5;
			margin-left: 10rpx;
		}
	}

	.login-footer {
		margin-bottom: 40rpx;
		width: 100%;
		text-align: center;

		.copyright {
			font-size: 24rpx;
			color: #999;
		}
	}
</style>